<template>
  <div>
    <!-- -->
    <h1 id="mymsg">{{msg}}</h1>
    <h1>{{count | five}}</h1>
    <button @click="tochange">改变</button>
    <div class="box">哈哈</div>
    <van-button type="primary">登录</van-button>
  </div>
</template>

<script setup>
// 移动端 适配方案： flex+rem 
// rem适配插件 flexible.js
// px自动转rem插件 postcss-pxtorem  

  import {ref,nextTick
  } from 'vue'
  // 俩个组件的路由钩子
 import { onBeforeRouteLeave,onBeforeRouteUpdate} from 'vue-router'
  let msg=ref("111");
  let tochange=()=>{
      msg.value="222"
      nextTick(()=>{
          console.log(document.getElementById("mymsg").innerHTML)
      })
  }

  let count=ref(8);
  
  onBeforeRouteLeave((to,form,next)=>{
    console.log("离开了")
    next();
  })

</script>
<style >
    .box{
      width:200px;
      height:200px;
      background:red;
    }
</style>